<script setup>
/*
vue2:
生命周期：
   beforeCreate:创建前
   created:创建后，可以访问data属性与methods
   beforeMount:渲染前
   mounted:渲染前
   beforeUpdate:更新前
   updated:更新后
   beforeDestroy:销毁前
   destroyed:销毁（中断渲染）后
vue3
   beforeCreate:创建前  删除了setup
   created:创建后，     删除了
   onBeforeMount  渲染前
   onMounted:渲染后
   onBeforeUpdate:更新前
   onUpdated:更新后
   onBeforeUnmount:销毁前
   onUnmounted:销毁后
 使用：
  1：导入（除了setup外其它都要先导入再使用）
     import {onMounted} from 'vue'
  2：使用
     onMounted(()=>{
       。。。相应代码
     })
  3：生命周期函数的使用没有限制

*/
import { onMounted, ref, onBeforeUnmount } from 'vue'
const mouse = ref({
  x: 0,
  y: 0
})
function move (e) {
  mouse.value.x = e.pageX
  mouse.value.y = e.pageY
}
onMounted(() => {
  window.addEventListener('mousemove', move)
})
onBeforeUnmount(() => {
  window.removeEventListener('mousemove', move)
})
</script>
<template>
  <div>
    <h3>鼠标的x:{{ mouse.x }}</h3>
    <h3>鼠标的y:{{ mouse.y }}</h3>
  </div>
</template>
<style></style>
